<!-- 冷热源 》 冷源系统 -->

<template>
  <canvas id="sourceColdCanvas" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import { Engine, Scene, ArcRotateCamera, Vector3, Color3, SceneLoader, MeshBuilder, StandardMaterial } from '@babylonjs/core'
import '@babylonjs/loaders'
import { meshBindAction } from '@/plugin/babylon/methods.js'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'SourceCold',

  data() {
    return {
      engine: null,
      scene: null,
    }
  },

  methods: {
    createScene(engine) {
      const scene = new Scene(engine)

      scene.createDefaultLight()

      const skyBox = MeshBuilder.CreateBox('skyBox', { size: 1000 }, scene)
      const skyBoxMaterial = new StandardMaterial('skyMaterial', scene)
      skyBoxMaterial.backFaceCulling = false
      skyBoxMaterial.emissiveColor = new Color3(1, 1, 1)
      skyBox.material = skyBoxMaterial

      const arcRotateCamera = new ArcRotateCamera('arc-rotate-camera', 3.13, 0.9, 15, new Vector3(1.01, 1.66, -1.4), scene)
      arcRotateCamera.upperBetaLimit = Math.PI / 2
      arcRotateCamera.allowUpsideDown = false
      arcRotateCamera.lowerRadiusLimit = 5
      arcRotateCamera.upperRadiusLimit = 40
      arcRotateCamera.attachControl(engine.getRenderingCanvas(), true)

      SceneLoader.Append('//192.168.139.84:8092/glb/', 'cold-source-2.glb', scene, () => {
        window.console.log('冷源模型加载成功!')

        const coolingTower1Mesh = scene.getMeshByName('fengji.001')
        const coolingTower2Mesh = scene.getMeshByName('fengji.002')
        const waterCooler1Mesh = scene.getMeshByName('lengshuiji.001')
        const waterCooler2Mesh = scene.getMeshByName('lengshuiji.002')

        let uOffset = 0
        const pipelineTextures = scene.textures.filter((t) => t.name.indexOf('pipeline.') === 0)
        setInterval(() => {
          uOffset += 0.5
          pipelineTextures.forEach((t) => {
            t.uOffset = uOffset
          })
        }, 300)

        setInterval(() => {
          waterCooler1Mesh.renderOverlay = !waterCooler1Mesh.renderOverlay
        }, 1000)

        meshBindAction(scene, coolingTower1Mesh, () => { window.top.postMessage('coolingTowerDetailsDialogIsShow', '*') })
        meshBindAction(scene, coolingTower2Mesh, () => { window.top.postMessage('coolingTowerDetailsDialogIsShow', '*') })
        meshBindAction(scene, waterCooler1Mesh, () => { window.top.postMessage('waterCoolerDetailsDialogIsShow', '*') })
        meshBindAction(scene, waterCooler2Mesh, () => { window.top.postMessage('waterCoolerDetailsDialogIsShow', '*') })
      })

      return scene
    },

    resize() {
      this.engine.resize()
    },
  },

  mounted() {
    this.engine = new Engine(document.getElementById('sourceColdCanvas'), true)
    this.scene = this.createScene(this.engine)
    this.engine.runRenderLoop(() => { this.scene.render() })

    window.console.log('加载冷源模型!')
    window.addEventListener('resize', this.resize)
  },

  destroyed() {
    window.removeEventListener('resize', this.resize)
  },
}
</script>
